<template>
  <div>
    <div>
      <div ref="bar" style="width:4.72rem;height:2.3rem"></div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts/lib/echarts");
import fontSizeRem from "../utils/remtopx.js";
export default {
  props: {
    formList: {}
  },
  data() {
    return {};
  },
  watch: {
    formList:{
      handler(val) {
        this.$nextTick(() => {
          this.setBar();
        });
      },
      deep: true
    }
  },
  methods: {
    setBar(index) {
      var myChart = this.$echarts.init(this.$refs.bar);
      let xData = this.formList.map(item => {
        return item.key;
      });
      let yData1 = this.formList.map(item => {
        return item.value
      });
            let that = this

      // 绘制图表
      myChart.setOption({
        grid: {
          left: "0.24rem",
          right: "5%",
          bottom: "0",
          top: "7.54%",
          // x2: "0.15rem",
          // y2: "0.3rem",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter(params) {
            return ( that.formList[params[0].dataIndex].timeStr+"<br />" +"点击量：" +
              params[0].value
            );
          }
        },
        color: ["#1890FF"],
        xAxis: {
          type: "category",
          // boundaryGap: false,
          axisTick: {
            show: false
          },
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#103D59"
            }
          },
          axisLabel: {
            // x轴字体颜色
            textStyle: {
              color: "#92A3CC",
              fontSize: fontSizeRem.fontSize(0.1)
            }
          }
        },
        yAxis: {
          type: "value",
          show: true,
          axisLine: {
            show: true // Y轴线
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false // 颜色类型的修改
          },
          axisLine: {
            lineStyle: {
              color: "#103D59"
            }
          },
          axisLabel: {
            // x轴字体颜色
            textStyle: {
              color: "#92A3CC",
              fontSize: fontSizeRem.fontSize(0.1)
            }
          }
        },
        series: [
          {
            type: "line",
            smooth: false,
            symbolSize: 0,
            stack: "总量",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#1890FF"
                },
                {
                  offset: 1,
                  color: "#1890FF"
                }
              ])
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "solid" //'dotted'虚线 'solid'实线
                }
              }
            },
            data: yData1
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
.title {
  margin-bottom: 0.26rem;
}
</style>